<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="background-color: aliceblue">

<div class="container" style="margin-top: 10px">
    <nav class="navbar navbar-inverse" role="navigation" style="background-color: aliceblue">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li ><a th:href="@{/book/bookList}">书籍商城</a></li>
                <li><a th:href="@{/book/addbook}">添加书籍</a></li>
                <li> <a th:href="@{/toLogin}">登录</a></li>
                <li> <a th:href="@{/register}" >注册</a></li>
                <!-- <li><a href="#">傻逼</a></li> -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分类 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">手机数码</a></li>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">鞋靴箱包</a></li>
                        <li class="divider"></li>
                        <li><a href="#">S孕婴保健</a></li>
                        <li class="divider"></li>
                        <li><a href="#">傻逼</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

        </div><!-- /.navbar-collapse -->
    </nav>
</div>





<div class="container">
    <div class="row">
        <span id="" style="font-size: 30px;padding-left:33px;">
            热门商品   <img src="">
        </span>
    </div>
    <div class="row">
        <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;">
            <img src="../img/literature/Sanguo.jpg"><br>
            <img src="../img/literature/Sanguo.jpg"><br>
            <img src="../img/literature/Sanguo.jpg"><br>
        </div>
        <div class="col-md-10 col-sm-10" style="padding-left: 10px;">
            <div class="row">
<!--                <div class="col-md-6 "  >-->
<!--                    <a href="#"><img src="../img/literature/Sanguo.jpg"></a>-->
<!--                    <a href="#"><img src="../img/science/santi.jpg"></a>-->
<!--                    <a href="#"><img src="../img/literature/shuihu.jpg"></a>-->

<!--                </div>-->
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/literature/Sanguo.jpg"></a>
                    <a href="#"><p><font color="gray">三国演义</p></a>
                    <p><font color="red">￥39</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/science/santi.jpg"></a>
                    <a href="#"><p><font color="gray">三体</p></a>
                    <p><font color="red">￥29</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/science/tunshi.jpg"></a>
                    <a href="#"><p><font color="gray">吞噬星空</p></a>
                    <p><font color="red">￥39.39</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/literature/Sanguo.jpg"></a>
                    <a href="#"><p><font color="gray">三国演义</p></a>
                    <p><font color="red">￥39</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/science/santi.jpg"></a>
                    <a href="#"><p><font color="gray">三体</p></a>
                    <p><font color="red">￥29</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/science/tunshi.jpg"></a>
                    <a href="#"><p><font color="gray">吞噬星空</p></a>
                    <p><font color="red">￥39.39</font></p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/literature/honglou.jpg"></a>
                    <a href="#"><p><font color="gray">红楼梦</p></a>
                    <p><font color="red">￥399</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/literature/shuihu.jpg"></a>
                    <a href="#"><p><font color="gray">水浒传</p></a>
                    <p><font color="red">￥399</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/literature/xiyou.jpg"></a>
                    <a href="#"><p><font color="gray">西游记</p></a>
                    <p><font color="red">￥399</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/it/data.jpg"></a>
                    <a href="#"><p><font color="gray">数据结构与算法</p></a>
                    <p><font color="red">￥399</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/it/internet.jpg"></a>
                    <a href="#"><p><font color="gray">计算机网络组成原理</p></a>
                    <p><font color="red">￥399</font></p>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                    <a href="#"><img src="../img/it/java.jpg"></a>
                    <a href="#"><p><font color="gray">java从入门到精通</p></a>
                    <p><font color="red">￥399</font></p>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="container" style="margin-top: 10px;">
    <div class="row">
        <ul class="list-inline"  align="center">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">招贤纳士</a></li>
            <li><a href="#">法律声明</a></li>
            <li><a href="#">有情链接</a></li>
            <li><a href="#">支付方式</a></li>
            <li><a href="#">配送方式</a></li>
            <li><a href="#">服务声明</a></li>
            <li><a href="#">广告声明</a></li>
        </ul>
        <div style="text-align: center;margin-top: 5px;margin-bottom: 20px;">
            CopyRight 0000-9999 刘氏商城 版权所有
        </div>
    </div>
</div>
</body>
</html>